<template>
	<view class="player">
		<u-navbar :title="musicContent.musicName" back-icon-color="#fff" :background="background" title-color="#fff"></u-navbar>
		<view class="u-page">
			<view class="content">
				<view class="outer">
					<cover-image :src="musicContent.musicImg" :class="musicPlayingKey ? 'img' : 'img stoped'"></cover-image>
				</view>
			</view>
			<view class="lyric">
				{{lyricText}}
			</view>
			<view class="funcList">
				<view class="like" @click="Heart">
					<u-icon name="heart-fill" v-if="heartKey"></u-icon>
					<u-icon name="heart" v-else></u-icon>
				</view>
				<u-icon name="chat" @click="goChart"></u-icon>
				<view class="collect" @click="Collect">
					<u-icon name="star-fill" v-if="collectKey"></u-icon>
					<u-icon name="star" v-else></u-icon>
				</view>
				<u-icon name="plus" @click="AddSongSheet"></u-icon>
			</view>
			<view class="slider-bar">
				<view class="time start">{{curPlayTimeNum}}</view>
					 <slider class="slider" :value="sliderValue" @change="sliderChange" min="0" :max="sliderMax"
					  backgroundColor="rgba(255,255,255,.3)" activeColor="rgba(255,255,255,.8)" block-size="15"/>
				<view class="time end">{{playTimeNum}}</view>
			</view>
			<view class="func">
				<u-icon name="skip-back-left" @click="pre"></u-icon>
				<view class="bgc" @click="play">
					<u-icon name="pause" v-if="musicPlayingKey"></u-icon>
					<u-icon name="play-right-fill" v-else></u-icon>
				</view>
				<u-icon name="skip-forward-right" @click="next"></u-icon>
			</view>
		</view>
		<PlayerMin :imgUrl="musicContent.musicImg"></PlayerMin>
		<u-popup v-model="showPopup" mode="bottom" border-radius="14">
			<view class="content">
				<scroll-view scroll-y="true" style="height: 800rpx;">
					<view>
						<view class="title">
							向歌单添加歌曲
						</view>
						<view v-if="songSheetList.length">
							<view class="item" @click="putSheetFromMusic(item)" v-for="(item,index) in songSheetList" :key="item.id">
								<view class="left">
									<view class="box">
										<u-icon name="bookmark-fill"
										size="50"
										color="#fff"></u-icon>
									</view>
								</view>
								<view class="right">
									<text>{{item.songSheetName}}</text>
								</view>
							</view>
						</view>
						<view v-else class="null">
							暂无数据
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { mapState, mapMutations, mapGetters } from "vuex"
	//import playerMin from '@/components/Playermin.vue'
	//const innerAudioContext = uni.createInnerAudioContext();
	export default {
		data() {
			return {
				background: {},
				textColor: "",
				musicContent: {},
				audioPlayer: null,
				sliderMax: "",
				// sliderValue: "",
				// curPlayTime: 0,
				heartKey: false,
				collectKey: false,
				showPopup: false,
				songSheetList: [],
				collectionSongId: "",
				likeId: "",
				// musicLyric: [],
				lyricText: "",
			}
		},
		// components:{
		// 	playerMin
		// },
		computed: {
			...mapState({
				list:({config})=>config.tabBarList,
				commonColor: ({config})=>config.commonColor,
				id: ({config}) => config.id,
				List: ({config}) => config.List,
				index: ({config}) => config.index,
				musicPlayingKey: ({config}) => config.musicPlayingKey,
				curPlayTime: ({config}) => config.curPlayTime,
				sliderValue: ({config}) => config.sliderValue,
				openid: ({config}) => config.openid,
			}),
			...mapGetters({
				curPlayTimeNum: "config/curPlayTimeNum",
			}),
			//curPlayTimeNum() {
				//console.log(this.$common.formatTime(this.curPlayTime));
				// let time = this.$common.formatTime(this.curPlayTime);
				// let regTime = new RegExp(time);
				// this.musicLyric.forEach(item => {
				// 	if(regTime.test(item)) {
				// 		this.lyricText = item.match(/\](.*)/)[1];
				// 		console.log(this.lyricText);
				// 	}
				// })
				//return this.$common.formatTime(this.curPlayTime);
			//},
			playTimeNum() {
				return this.$common.formatTime(this.sliderMax);
			}
		},
		methods: {
			...mapMutations({
				SET_index: "config/SET_index",
				SET_musicPlayingKey: "config/SET_musicPlayingKey",
				SET_id: "config/SET_id",
				SET_imgUrl: "config/SET_imgUrl",
				SET_curPlayTime: "config/SET_curPlayTime",
				SET_sliderValue: "config/SET_sliderValue",
				SET_songSheetItem: "config/SET_songSheetItem",
				SET_showPlayerMini: "config/SET_showPlayerMini",
				// SET_musicLyric: "config/SET_musicLyric",
			}),
			getSongSheetList() {
				this.$http.get("/queryUserSongSheet.htm",{userId: this.openid}).then(res => {
					console.log(res);
					this.songSheetList = res.result;
				})
			},
			getMusicData(id) {
				this.musicLyric = [];
				this.lyricText = "";
				this.$http.post("/queryOne1.htm", {id, userId: this.openid}, {header: { 'content-type': 'application/x-www-form-urlencoded' },}).then(res => {
					console.log(res);
					this.musicContent = res.result;
					this.$au_player.src = this.musicContent.musicMp3;
					this.SET_id(this.musicContent.id);
					this.SET_imgUrl(this.musicContent.musicImg);
					this.sliderMax = Math.floor(this.musicContent.time / 1000);
					this.heartKey = this.musicContent.likeType ? true : false;
					this.collectKey = this.musicContent.collectionSongType ? true : false;
					this.collectionSongId = this.musicContent.collectionSongId;
					this.likeId = this.musicContent.likeId;
					this.musicLyric = this.musicContent.musicLyric.split("\\n");
					//this.getLyLrc();
					this.changeMusic();
				})
			},
			sliderChange(e) {
				console.log(e.detail.value);
				//this.curPlayTime = e.detail.value;
				this.SET_curPlayTime(e.detail.value);
				// this.SET_sliderValue(e.detail.value);
				this.$au_player.seek(e.detail.value);
				
			},
			play() {
				this.$au_player.selfPlay();
			},
			changeMusic() {
				if(this.musicPlayingKey) {
					this.$au_player.play();
					this.$au_player.onTimeUpdate(() => {
						const { currentTime,duration} = this.$au_player;
						this.SET_curPlayTime(Math.floor(currentTime));
						this.SET_sliderValue(Math.floor(currentTime));
					})
					this.$au_player.onEnded(() => {
						this.SET_musicPlayingKey(false);
					})
					this.$au_player.onError((res) => {
						this.SET_musicPlayingKey(false);
						uni.showToast({
						    title: res,
							icon: "none",
						});
					});
				} else {
					this.$au_player.stop();
				}
			},
			pre() {
				if(0 < this.index && this.index <= this.List.length) {
					const index = this.index - 1;
					this.SET_index(index);
					this.getMusicData(this.List[index].id || this.List[index].musicId);
				} else {
					uni.showToast({
					    title: '当前为第一条歌曲',
						icon: "none",
					});
				}
			},
			next() {
				if(0 <= this.index && this.index < this.List.length - 1) {
					const index = this.index + 1;
					this.SET_index(index);
					this.getMusicData(this.List[index].id);
				} else {
					uni.showToast({
					    title: '当前为最后一条歌曲',
						icon: "none",
					});
				}
			},
			getDetail(){},
			Heart() {
				console.log(this.heartKey)
				this.heartKey = !this.heartKey;  
				if(!this.heartKey) {
					this.$http.get("/deleteLikeSong.htm", {
						likeId: this.likeId
					}).then(res => {
						console.log(res);
						
					})
				} else {
					this.$http.get("/insertLikeSong.htm", {
						userId: this.openid,
						musicId: this.id,
					}).then(res => {
						console.log(this.likeId);
						if(!this.likeId) {
							this.$http.get("/queryOne1.htm", {id: this.id, userId: this.openid}).then(res => {
								this.likeId = res.result.likeId;
							})
						}
					})
				}
			},
			Collect() {
				this.collectKey = !this.collectKey;
				if(!this.collectKey) {
					this.$http.get("/deleteCollectionSong.htm", {
						collectionSongId: this.collectionSongId
					}).then(res => {
						console.log(res);
						
					})
				} else {
					this.$http.get("/insertCollectionSong.htm", {
						userId: this.openid,
						musicId: this.id,
					}).then(res => {
						console.log(this.collectionSongId);
						if(!this.collectionSongId) {
							this.$http.get("/queryOne1.htm", {id: this.id, userId: this.openid}).then(res => {
								this.collectionSongId = res.result.collectionSongId;
							})
						}
					})
				}
			},
			goChart() {
				uni.navigateTo({
					url: "/pages/Dynamic/Dynamic"
				})
			},
			AddSongSheet() {
				this.showPopup = true;
			},
			putSheetFromMusic(item) {
				this.$http.get("/insertSheetLink.htm", {
					songSheetId: item.id,
					musicId: this.id,
					userId: this.openid,
				}).then(res => {
					console.log(res);
					this.showPopup = false;
				})
			},
			getLyLrc() {
				let musicLyric = this.musicContent.musicLyric.split("\\n");
				musicLyric.forEach((item, index) => {
					if(index != musicLyric.length-1) {
						this.musicLyric.push({
							time: this.$common.TimeFormat(item.match(/\[(\S*)\]/)[1]),
							content: item.match(/\](\S*)/)[1],
						});
					}
				})
			},
		},
		created() {
			// if(this.List[this.index].id != this.id) {
			// }
			// 241840 / 1000
			this.sliderMax = Math.floor(255556 / 1000);
			this.getSongSheetList();
			//初始化
			this.background["backgroundColor"] = this.commonColor;
			this.textColor= this.commonColor;
			this.SET_showPlayerMini(true);
			this.SET_musicPlayingKey(false);
			this.SET_songSheetItem(true);
			this.$au_player.startTime = 0;
			this.curPlayTime = 0;
			this.$au_player.stop();
			this.$http.post("/queryOne1.htm", {id: this.List[this.index].id || this.List[this.index].musicId, userId: this.openid}, {header: { 'content-type': 'application/x-www-form-urlencoded' },}).then(res => {
				//console.log(res);
				this.musicContent = res.result;
				this.$au_player.src = this.musicContent.musicMp3;
				//this.$au_player.src = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3';
				this.SET_id(this.musicContent.id);
				this.SET_imgUrl(this.musicContent.musicImg);
				this.sliderMax = Math.floor(this.musicContent.time / 1000);
				this.heartKey = this.musicContent.likeType ? true : false;
				this.collectKey = this.musicContent.collectionSongType ? true : false;
				this.collectionSongId = this.musicContent.collectionSongId;
				this.likeId = this.musicContent.likeId;
				this.musicLyric = this.musicContent.musicLyric.split("\\n");
				// this.SET_musicLyric(this.musicContent.musicLyric.split("\\n"));
				// console.log(this.$store.getters);
			})
		},
		onLoad() {},
		watch: {
			curPlayTimeNum(newVal, oldVal) {
				// let time = this.$common.TimeFormat(newVal);
				let regTime = new RegExp(newVal);
				console.log(regTime);
				this.musicLyric.forEach(item => {
					
					if(regTime.test(item)) {
						this.lyricText = item.match(/\](.*)/)[1];
						console.log(this.lyricText);
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
.player {
	display: flex;
	flex-direction: column;
	height: 100%;
	.u-page {
		flex: 1;
		overflow: hidden;
		background-color: #e3d3d3;
		width: 100%;
		padding: 0 30rpx;
		.content {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 65%;
			.outer {
				background-color: #000;
				// padding: 80rpx;
				border-radius: 50%;
				.img {
					margin: 50rpx;
					border-radius: 50%;
					width: 350rpx;
					height: 350rpx;
					animation: turn 10s linear .1s infinite;
				}
				.stoped{
				  animation-play-state: paused;     
				}
			}
			
			
		}
		.lyric {
			height: 5%;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			font-size: 30rpx;
			color: #fff;
			// text-align: center;
			padding: 0 40rpx;
			letter-spacing: 0.2em;
		}
		.funcList {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 10%;
			padding: 0rpx 70rpx;
			color: #fff;
			font-size: 50rpx;
		}
		.slider-bar {
			display: flex;
			align-items: center;
			height: 5%;
			width: 100%;
			color: #F1F1F1;
			.slider {
				flex: 1;
				margin: 20px 18rpx;
			}
			.time {
				font-size: 20rpx;
			}
		}
		.func {
			display: flex;
			justify-content: space-around;
			align-items: center;
			height: 15%;
			padding-bottom: 30rpx;
			font-size: 50rpx;
			color: #fff;
			.bgc {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				background-color: #fff;
				color: #ccc;
			}
		}
	}
	
}

@keyframes turn{
      0%{-webkit-transform:rotate(0deg);}
      25%{-webkit-transform:rotate(90deg);}
      50%{-webkit-transform:rotate(180deg);}
      75%{-webkit-transform:rotate(270deg);}
      100%{-webkit-transform:rotate(360deg);}
    }
.content {
	padding: 24rpx;
	text-align: center;
	.title {
		font-size: 30rpx;
		text-align: center;
		padding: 15rpx 0;
	}
	.add-item, .item {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 20rpx 0;
		.left {
			padding: 0 20rpx;
			.box {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100rpx;
				height: 100rpx;
				background-color: #000;
				opacity: .1;
				border-radius: 10rpx;
			}
		}
		.right {
			font-size: 30rpx;
			letter-spacing: 3rpx;
		}
	}
}
</style>
